<template>
  <div class="home">
    <img alt="Vue logo" src="../assets/logo.png">
    <HelloWorld msg="Welcome to Your Vue.js + TypeScript App"/>
    <a href="http://m7.music.126.net/20210424110900/48a787094d0ae7c4da0369a73692223c/ymusic/0fd6/4f65/43ed/a8772889f38dfcb91c04da915b301617.mp3" />
    <el-form :model='loginData'>
      <el-form-item label='手机号' prop='phone'>
        <el-input v-model="loginData.phone"></el-input>
      </el-form-item>
      <el-form-item label='密码' prop='password'>
        <el-input type='password' v-model="loginData.password"></el-input>
      </el-form-item>
      <el-form-item>
        <el-button type="primary" @click="login">登录</el-button>
      </el-form-item>
    </el-form>
  </div>
</template>

<script lang="ts">
import { defineComponent, reactive, toRefs } from 'vue'
import HelloWorld from '@/components/HelloWorld.vue'; // @ is an alias to /src
import { login_phone } from '../api/user'
export default defineComponent({
  components: {
    HelloWorld,
  },
  setup() {
    const state = reactive({
      loginData: { phone: '', password: '' },
      // rules: {
      //   phone: [{required: true, message: '请输入手机号', trigger: 'blur'}], 
      //   password: [{required: true, message: '请输入密码', trigger: 'blur'}]
      // }
    })
    const login = () => {
      login_phone(state.loginData).then( res => {
        console.log(res)
        if(res.status === 200){
          const id = res.data.account.id
          localStorage.setItem('uid', id)
        }
      })
    }
    return {
      ...toRefs(state),
      login
    }
  }
})
</script>
